<template>
	<view class="">
		<u-popup :show="popupShow" mode="bottom" @close="close">
			<view style="height: 650rpx;">
				<view class="acea-row row-between row-middle"
					style="height: 80rpx; padding: 20rpx; border-bottom: 2rpx solid #E5E5E5;">
					<span @click="$emit('popupClose')">取消</span>
					<span @click='clickOk'>确定</span>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="acea-row row-middle row-left mt30">
						<view  v-for="(item,index) in sspreList" :key="item.id"
							class="acea-row row-middle row-around check"
							
							:class="advantageIds.indexOf(index)!=-1?'checkbag':''"
							@click="advantageChecked(item,index)">
								{{ item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		dictionary
	} from "@/api/subletOfShop.js"
	export default {
		props: {
			gids: {
				type: Number,
				default: null,
			},
			popupShow:{
				type:Boolean,
				default: false,
			},
			checkIds:{
				type: String,
				default: ''
			
			}
		},
		data() {
			return {
				scrollTop: 0,
				// popupShow: false,
				sspreList: [],
				old: {
					scrollTop: 0
				},
				advantageIds: [],
				dataLiat:[],
			}
		},
		watch:{
			gids:{
				handler(newval){
					if(newval){
						this.getDictionary()
					}
				},
				immediate:true,
				deep:true,
			},
			popupShow:{
				handler(newval){
					if(newval){
						this.defaultChoose()
					}
				},
				immediate:true,
				deep:true,
			}
		},
		mounted() {
			// this.getDictionary()
		},
		methods: {
			async advantageChecked(item,index){
				if(this.advantageIds.indexOf(index)!=-1){
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.dataLiat.splice(item,1)
				}else{
					this.advantageIds.push(index);
					this.dataLiat.push(item)
				}
			},
			defaultChoose(){
				this.sspreList.forEach((item,index)=>{
					if(this.checkIds.indexOf(item.id)!=-1){
						this.advantageChecked(item,index);
					}
				})
			},
			close(){
				this.$emit('popupClose')
				this.dataLiat= []
				this.advantageIds = []
			},
			clickOk(){
				this.$emit('clickOk',this.dataLiat)
				this.dataLiat= []
				this.advantageIds = []
			},
			getDictionary() {
				let aa = this.gids
				uni.showLoading({
					title:'加载中'
				})
				dictionary({
					gids: aa
				}).then(res => {
					uni.hideLoading()
					this.sspreList = res.data[this.gids];
					
					this.defaultChoose()
					
				})
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style>
	.check {
		width: 30%;
		margin-bottom: 20rpx;
		border: 4rpx solid #DEDEDE;
		padding: 10rpx 0 10rpx 0;
		margin-left: 18rpx;
	}

	.checkbag {
		background: #DEDEDE;
	}
</style>